<template>
  <div class="my-collect-layout">
    <ul class="my-collect" v-if="myCollect.length>0">
      <li class="collect-list" v-for="(item,index) in myCollect" @click="toDetail(item)">
        <i class="icon-collect" @click.stop="remove(item)"></i>
        <div class="item-line">
          <span class="num">{{item.data.data.line.nm}}路</span>
          <span class="start">{{item.data.data.line.ss}}</span>
          <i class="fa fa-long-arrow-right arrow" aria-hidden="true"></i>
          <span class="end">{{item.data.data.line.es}}</span>
        </div>
        <div class="item-data">
          <span class="time">时间：{{item.data.data.line.ft}} - {{item.data.data.line.lt}}</span>
          <span class="travel">全程:{{item.data.data.line.sn}}站</span>
        </div>
      </li>
    </ul>
    <div class="no-collect" v-if="myCollect.length===0">
      <img src="../../assets/img/noCollet.png" class="collect-img">
      <p class="no-txt">当前未收藏任何路线，赶紧点击</p>
      <p class="no-txt">下方的按钮收藏经常查看的线路吧</p>
    </div>
    <div class="ad-tool">
      <i class="icon-refresh" @click="reFresh"></i>
      <div class="add-line" @click="add">
        <p class="add">+</p>
        <p class="add-txt">添加路线</p>
      </div>
    </div>
  </div>
</template>
<script>
  import {myCollect, removeCollect} from '../../utils/http'

  export default {
    data() {
      return {
        myCollect: []
      }
    },
    mounted() {
      this.onReady()
    },
    methods: {
      onReady() {
        myCollect({
          cb: (data) => {
            this.myCollect = data
          }
        })
      },
      toDetail (item) {
        localStorage.setItem('lineDetail', JSON.stringify(item))
        this.$router.push({path: '/lineDetail'})
      },
      remove(item) {
        removeCollect({
          lineId: item.lineId,
          lineNo: item.lineNo,
          direction: item.direction,
          cb: () => {
            this.onReady()
          }
        })
      },
      reFresh() {
        window.location.reload()
      },
      add() {
        this.$router.push({path: 'lineQuery', query: {to: 'myCollect'}})
      }
    }
  }
</script>
<style scoped>
  @import "../../assets/css/myCollect.css";
</style>
